<template>
  <div class="resetpwd">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="desktop">
      <div class="title">修改密码</div>
      <!-- <div class="fz18 lh62 c999">Resetpwd the password</div> -->
      <el-form-item prop="old_pwd" class="mt40">
        <el-input
          ref="old_pwd"
          v-model="ruleForm.old_pwd"
          type="password"
          autocomplete="off"
          placeholder="请输入原密码"
        />
      </el-form-item>
      <el-form-item prop="new_pwd">
        <el-input
          ref="new_pwd"
          v-model="ruleForm.new_pwd"
          type="password"
          autocomplete="off"
          placeholder="请输入新密码"
        />
      </el-form-item>
      <el-form-item prop="confirm_pwd">
        <el-input
          ref="confirm_pwd"
          v-model="ruleForm.confirm_pwd"
          type="password"
          autocomplete="off"
          placeholder="请确认新密码"
        />
      </el-form-item>
      <el-button
        type="primary"
        class="btn fz16"
        @click="submitForm('ruleForm')"
      >确 定</el-button>
    </el-form>
  </div>
</template>

<script>
import { changePassword } from '@/api/user';
export default {
  name: 'Resetpwd',
  data() {
    return {
      ruleForm: {
        old_pwd: '',
        new_pwd: '',
        confirm_pwd: '',
        id: this.$route.query.id
      },
      rules: {
        old_pwd: [
          { required: true, message: '请填写原密码', trigger: 'change' }
        ],
        new_pwd: [
          { required: true, message: '请填写新密码', trigger: 'change' }
        ]
      }
    };
  },
  methods: {
    submitForm(ruleForm) {
      if (this.ruleForm.new_pwd !== this.ruleForm.confirm_pwd) {
        return this.$message.info('两次密码输入不一致');
      } else {
        changePassword(this.ruleForm).then(({ msg }) => {
          this.$message.success(msg);
          this.$router.push('/login');
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
$bg: #22467a;
$zoom: 937 / 1080;
.resetpwd {
  position: relative;
  min-height: 100%;
  width: 100%;
  background: url("../../assets/images/loginBg.png") no-repeat #eee;
  background-size: 100% 100%;
  overflow: hidden;
  .desktop {
    zoom: $zoom;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 600px;
    max-height: 100vh;
    max-width: 100%;
    background: #ffffff;
    border-radius: 20px;
    padding: 60px 160px;
    box-sizing: border-box;
    .title {
      font-size: 40px;
      line-height: 40px;
      font-weight: bold;
    }
    .codeForm {
      position: relative;
      .el-button {
        position: absolute;
        top: 0;
        right: 0;
        border-radius: 0 4px 4px 0;
      }
    }
    .btn {
      width: 360px;
      height: 50px;
      display: block;
      border-radius: 35px;
      margin: 64px auto 0;
      background: $bg;
    }
    ::v-deep.el-form-item__error {
      font-size: 16px;
    }
  }
}
</style>
